import {
  ChatInput,
  type ChatInputRef,
} from "@renderer/components/business/chat-input";
import { Toolbox } from "@renderer/components/business/toolbox";
import { Label } from "@renderer/components/ui/base/field";
import { useSidebar } from "@renderer/components/ui/base/sidebar";
import { useChatInputFocus } from "@renderer/hooks/use-chat-input-focus";
import { cn } from "@renderer/lib/utils";
import {
  useDisplayAppStoreSetting,
  useLayoutModeSetting,
} from "@renderer/queries/hooks/use-settings";
import { motion } from "motion/react";
import { useRef } from "react";
import { useTranslation } from "react-i18next";

export function NewThread() {
  const { t } = useTranslation("translation", {
    keyPrefix: "new-thread",
  });

  const chatInputRef = useRef<ChatInputRef>(null);
  const { isTransitioning } = useSidebar();
  const { data: displayAppStore } = useDisplayAppStoreSetting();
  const { data: layoutMode } = useLayoutModeSetting();

  const getLayoutClass = (mode: string | null | undefined) => {
    switch (mode) {
      case "wide":
        return "max-w-[960px] px-8";
      case "ultra-wide":
        return "max-w-[1440px] px-6";
      default:
        return "max-w-[720px]";
    }
  };

  useChatInputFocus(chatInputRef);

  return (
    <div className="mx-auto flex h-full w-full flex-1 flex-col items-center justify-center gap-y-4">
      <div
        className={cn(
          "flex w-full flex-col gap-y-9",
          getLayoutClass(layoutMode),
        )}
      >
        <span className="text-center text-[34px]">{t("hello-world")}</span>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{
            opacity: 1,
          }}
          layoutId={isTransitioning ? undefined : "chat-input"}
          transition={{
            duration: isTransitioning ? 0 : 0.3,
            ease: "easeInOut",
          }}
          className="mx-auto w-full"
        >
          <ChatInput ref={chatInputRef} />
        </motion.div>
      </div>

      {displayAppStore && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{
            opacity: displayAppStore ? 1 : 0,
            y: displayAppStore ? 0 : 20,
          }}
          transition={{
            duration: 0.5,
            delay: 0.5,
            ease: "easeOut",
          }}
          className={cn("flex flex-col gap-2", getLayoutClass(layoutMode), {
            "pointer-events-none": !displayAppStore,
          })}
        >
          <Label>{t("toolbox-label")}</Label>
          <div className="flex w-full justify-end">
            <Toolbox />
          </div>
        </motion.div>
      )}
    </div>
  );
}
